<script setup lang="ts">
    import { ref, reactive, watch, computed } from 'vue';
    import { useRouter } from 'vue-router';
    import { useUserStore } from '@/stores/user';

    import User from "@/views/Main/User/index.vue";
    import RenderMenu from "@/views/Main/User/Center/Render/index.vue";

    const userStore = useUserStore();

    const userInfo = computed(() => userStore.userInfo);

    const router = useRouter()
    // 菜单类型
    const type = ref(0);
    // 菜单数据
    const menuData = reactive([{
        index: 0,
        icon: 'basicInfo',
        menuName: '基本资料',
        url: '/users/basicInfo'
    },{
        index: 1,
        icon: 'setUp',
        menuName: '账号设置',
        url: '/users/settings'
    }]);

    // 监听当前路由
    watch(
        () => router.currentRoute.value,
        (to: any) => {
            // 获取当前菜单信息
            const item = menuData.find((item) => item.url === to.path);
            if(item) {
                type.value = item.index;
            }
        },
        { immediate: true }
    )

</script>
<template>
    <user :type="1" :userInfo="userInfo">
        <div class="ui stackable grid" style="margin-top: 10px;">
            <!--左边-->
            <div class="four wide column">
                <!-- 左侧菜单 -->
                <div class="left menu">
                    <ul>
                        <li v-for="(item, index) in menuData" :key="index" class="item" :class="$route.path === item.url ? 'active' : ''">
                            <router-link :to="item.url">
                                <span>
                                    <svg-icon 
                                        :href='"#icon-" + item.icon' 
                                        width="14px" 
                                        height="14px" 
                                        :class="$route.path === item.url ? 'common-icon-active' : 'common-icon'"
                                    ></svg-icon>&nbsp;{{ item.menuName }}
                                </span>
                                <el-icon><ArrowRight /></el-icon>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
            <!--右边-->
            <div class="twelve wide column">
                <div class="content-body">
                    <render-menu :index="type" :userInfo="userInfo" />
                </div>
            </div>
        </div>
    </user>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" />